Redesigning an interactive graph for a better user experience in clarity and aesthetics.
Prof. Kam has given us the following graph to work on:
First, let us look at the elements of the graph that are detrimental to clarity.
Next, let us discern the issues with the aesthetics of the visualisation:
Lastly, in the critique section, we will be examining the flaws in the interactive features of the visualisation.
Below you can see the plan for a new and improved visualisation:
So how does this improve the abovementioned pain points? Let us find out! ## 2.2 Clarity
Lastly, how will we remedy some of the interactivity flaws?
Under here you can see a snapshot of the final product of this Data Viz Makeover. The full interactive version can be found on Tableau Public here.
| Step | Change | Screenshot |
|---|---|---|
| 1. | Open Tableau Prep Builder | |
| 2. | Import both, the shape file (green) and the data file (orange) into Tableau Prep Builder and drag them into the main pane. | |
| 3. | Click “view and clean data” (1.) on the data file flow. Change to list view (2.) and find the variable “TIME_PER_HOUR” (3.) and rename it to “HOUR_OF_DAY” (4.). | |
| 4. | Repeat the previous step for variables “ORIGIN_SZ” and “DESTINATION_SZ”, renaming them “ORIGIN_SUBZONE” and “DESTINATION_SUBZONE” respectively. | |
| 5. | Navigate to the “YEAR_MONTH” variable (1.). Change its data type from “String” to “Date” (2.). | |
| 6. | Next, move to the profile pane (1.) and find the variable “ORIGIN_SUBZONE” and right click on the “null” value category (2.). Exclude the null value from the variable (3.). | |
| 7. | Repeat the last step with variable “DESTINATION_SUBZONE”. | |
| 8. | Go back to the flow menu. Right click shape file data and click on “Rename”. Rename the file to “Shapes_Origin”. | |
| 9. | Drag “Shapes_Origin” towards the cleaned data file and drop it on the appearing “Join” pane. | |
| 10. | Change the join type to “full”. (Note: the purpose of this is to ensure that both, the origin and destination subzone columns, will be able to interact with the shapefile.) |
|
| 11. | Click “Add” in the “Applied Join Clauses” section to add a join. | |
| 12. | Join the “Clean 1” and “Shapes_Origin” tables on their “ORIGIN_SUBZONE” and “SUBZONE_N” variables respectively. Add a join clause between “DESTINATION_SUBZONE” and “SUBZONE_N”. |
|
| 13. | The final join should look as follows. Make sure the settings and numbers match what is shown inside the orange boxes in the image. | |
| 14. | Add an output node to the flow. | |
| 15. | Locate an appropriate location on your device to save the output file (1.). Rename the file to “Bus Flows and Shapes” or another name you deem appropriate (2.). Last, press “Run Flow” (3.). | |
| 16. | Open Tableau Desktop and import “Bus Flows and Shapes” | |
| 17. | Got to “Sheet 1” (1.) and rename it to “Origin Subzone Trips by Hour of Day” (2.). | |
| 18. | Go to “Hour of Day” and right click it (1.) and convert it from a continuous to a discrete variable (2.). | |
| 19. | Drag “Hour of Day” into the column pane and “Total Trips” into the row pane. | |
| 20. | Drag “Hour of Day” into the filters pane and filter out all hours outside the 5 to 23 range. Untick the boxes for “Null”, “0”, “1”, “2”, “3”, and “4”. |
|
| 21. | Next, drag “Origin Subzone” into the filter pane and only select “ADMIRALTY”. | |
| 22. | Show the Filter for “Origin Subzone”. | |
| 23. | Change the “Origin Subzone” filter to a single value drop down list. | |
| 24. | Drag “Day Type” into both, the column pane and the colour pane (orange boxes). Change the view to from “Standard” to “Entire View” (green box). |
|
| 25. | Right click anywhere on the x-axis and and deselect “Show Header”. | |
| 26. | Right click anywhere on the y-axis and click “Edit Axis” | |
| 27. | Change the axis title to “Total Number of Trips Made”. | |
| 28. | Click on “Tooltip” and delete the “Day Type” line. | |
| 29. | Right click on the title and select “Edit Title”. | |
| 30. | Change the title to “Trips Generated From |
|
| 31. | Right click the sheet tab and duplicate the current sheet. | |
| 32. | Rename the duplicated sheet tab to “Destination Subzone Trips by Hour of Day”. | |
| 33. | Drag “Destination Subzone” to replace “Origin Subzone” in the filters pane. | |
| 34. | Select only “ADMIRALTY” and click “Ok”. | |
| 35. | Show the filter and change it to a single select dropdown menu as outlined in steps numbers 22 and 23. | |
| 36. | Change the title of the graph to “Trips Attracted To |
|
| 37. | Create a new sheet. | |
| 38. | Rename the sheet to “Adjacency Matrix Weekday” | |
| 39. | Drag “Origin Subzone” and “Destination Subzone” into the columns and rows panes respectively. Drop the “Total Trips” variable onto the text pane. Change the view to “Entire View”. |
|
| 40. | Next, select the “Show Me” pane and change the graph type to heatmap. Make sure to check that the graph shows in “Entire View” |
|
| 41. | Drag “Day Type” into the filters pane and only select “WEEKDAY”. This time we will not be showing the filter in the righthand-side menu. | |
| 42. | Add filters for “Origin Subzone” and “Destination Subzone”. Set them as dropdown menu multiselect. Furthermore, right click the “SUM(Total Trips)” and hide it. |
|
| 43. | Right click the “SUM(Total Trips)” field in the markers pane and select “Quick Table Calculations” > “Percent of Total”. | |
| 44. | Duplicate the current sheet as shown in step number 31. Rename the sheet to “Adjacency Matrix Weekends / Holiday”. The title should change automatically. |
|
| 45. | Switch the “Day Type” filter to “WEEKENDS/HOLIDAY”. | |
| 46. | Open a new Dashboard | |
| 47. | Drag in the two “By Hour of Day” Sheets next to each other. The “Origin” sheet should be on the left and the “Destination” sheet should be on the right. Make sure the legend is on top, then the origin filter and then the destination filter. | |
| 48. | Go to the “Adjacency Matrix Weekday” (1.) sheet and for each of the two filters (2.) select: “Apply to Worksheets”(3.) > “Selected Worksheets”(4.). | |
| 49. | Tick the “Adjacency Matrix Weekends/Holiday” and then click ok to sync the filters over the two sheets. | |
| 50. | Go back to the Dashboard and arrange the sheets and filters in the following way. | |
| 51. | Insert title and subtitles. Title font: 28 Subtitle font: 20 Sub-Subtitle font: 15 Graph Title font: 10 |
Distill is a publication format for scientific and technical writing, native to the web.
Learn more about using Distill for R Markdown at https://rstudio.github.io/distill.